<template>
  <div class="container">
    <a-input-search placeholder="请输入" :value="inputValue" @change="handleInputChange" @search="save"><a-button slot="enterButton" type="primary">确定</a-button></a-input-search>
    <a-list item-layout="horizontal" :data-source="infoList" bordered>
      <a-list-item slot="renderItem" slot-scope="item">
        <a-checkbox :checked="item.done" @change="changeState($event, item.id)">{{ item.title }}</a-checkbox>
        <a slot="actions" @click="deleteById(item.id)">删除</a>
      </a-list-item>
      <div slot="footer" class="footer">
        <span>剩余{{ undoneCount }}个任务</span>
        <a-button-group>
          <a-button :type="viewKey==='all'? 'primary':'default'" @click="changeInfo('all')">全部</a-button>
          <a-button :type="viewKey==='undone'? 'primary':'default'" @click="changeInfo('undone')">未完成</a-button>
          <a-button :type="viewKey==='done'? 'primary':'default'" @click="changeInfo('done')">已完成</a-button>
        </a-button-group>
        <a-button type="link" @click="clean">清除已完成</a-button>
      </div>
    </a-list>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['list', 'inputValue', 'viewKey']),
    ...mapGetters(['undoneCount','infoList'])
  },
  methods: {
    getlist() {
      this.$store.dispatch('getList')
    },
    handleInputChange(e) {
      console.log(e.target.value)
      this.$store.commit('setInputValue', e.target.value)
    },
    save() {
      if (this.inputValue.trim().length <= 0) {
        return this.$message.warning('输入内容为空')
      }
      this.$store.commit('save')
    },
    deleteById(id) {
      this.$store.commit('delete', id)
    },
    changeState(e, id) {
      const param = {
        id: id,
        done: e.target.checked
      }
      this.$store.commit('changeState', param)
    },
    clean() {
      this.$store.commit('cleandone')
    },
    changeInfo(key) {
      this.$store.commit('changeViewKey', key)
    }
  },
  created() {
    this.getlist()
  }
}
</script>
<style scoped>
.container {
  width: 60%;
  margin: 10px auto 0;
}
.ant-input-search {
  margin-bottom: 5px;
}

.footer {
  display: flex;
  justify-content: space-between;
}
</style>
